<template>
  <div>
    <RuleTable
      type="complex"
      :RuleTable="test"
      :colFactors="colFator"
      :rowFactors="rowFactors"
      :initDatas="data"
      :aoutoBuild="false"
      :results="resultFactors"
    />
    <!-- :row-selection="{type:'radio', selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->

    <!-- <tableDemo2 :tabledemo="test2" ref="tableDemo" /> -->
    <a-button type="primary" @click="getRule">获取表格数据</a-button>
    <a-button type="primary" @click="addFactor">增加因子</a-button>
    <a-button type="primary" @click="deleteFactor">删除因子</a-button>
    <a-button type="primary" @click="updateFactor">修改因子</a-button>
    <a-button type="primary" @click="getFactor">获取因子</a-button>
    <a-button type="primary" @click="addRule">增加表格数据</a-button>
    <a-button type="primary" @click="deleteRule">删除表格数据</a-button>
    <a-button type="primary" @click="reset">重置表格数据</a-button>
    <a-button type="primary" @click="setHighLight">设置高亮</a-button>
    <a-button type="primary" @click="addResults">添加结果因子</a-button>
    <a-button type="primary" @click="setHeaderHighLight">设置头部高亮</a-button>
  </div>
</template>
<script>
import RuleTable from './RuleTableCompont.vue'
import tableDemoClass from './tableDemoClass'
const data = [
  { P01: 1, P02: '11', P03: 'a1', P04: '[0, 0.54)', R01: 0.85 },
  { P01: 1, P02: '11', P03: 'a2', P04: '[0, 0.54)', R01: 0.86 },
  { P01: 1, P02: '22', P03: 'a1', P04: '[0, 0.54)', R01: 1.05 },
  { P01: 1, P02: '22', P03: 'a2', P04: '[0, 0.54)', R01: 1.05 },
  { P01: 0, P02: '11', P03: 'a1', P04: '[0, 0.54)', R01: 1.05 },
  { P01: 0, P02: '11', P03: 'a2', P04: '[0, 0.54)', R01: 1.05 },
  { P01: 0, P02: '22', P03: 'a1', P04: '[0, 0.54)', R01: 1.1 },
  { P01: 0, P02: '22', P03: 'a2', P04: '[0, 0.54)', R01: 1.1 },
  { P01: 1, P02: '11', P03: 'a1', P04: '[0.54, 0.58)', R01: 0.85 },
  { P01: 1, P02: '11', P03: 'a2', P04: '[0.54, 0.58)', R01: 0.86 },
  { P01: 1, P02: '22', P03: 'a1', P04: '[0.54, 0.58)', R01: 1.05 },
  { P01: 1, P02: '22', P03: 'a2', P04: '[0.54, 0.58)', R01: 1.05 },
  { P01: 0, P02: '11', P03: 'a1', P04: '[0.54, 0.58)', R01: 1.05 },
  { P01: 0, P02: '11', P03: 'a2', P04: '[0.54, 0.58)', R01: 1.05 },
  { P01: 0, P02: '22', P03: 'a1', P04: '[0.54, 0.58)', R01: 1.1 },
  { P01: 0, P02: '22', P03: 'a2', P04: '[0.54, 0.58)', R01: 1.1 },

  { P01: 1, P02: '11', P03: 'a1', P04: '[0.58, 0.59)', R01: 0.85 },
  { P01: 1, P02: '11', P03: 'a2', P04: '[0.58, 0.59)', R01: 0.86 },
  { P01: 1, P02: '22', P03: 'a1', P04: '[0.58, 0.59)', R01: 1.05 },
  { P01: 1, P02: '22', P03: 'a2', P04: '[0.58, 0.59)', R01: 1.05 },
  { P01: 0, P02: '11', P03: 'a1', P04: '[0.58, 0.59)', R01: 1.05 },
  { P01: 0, P02: '11', P03: 'a2', P04: '[0.58, 0.59)', R01: 1.05 },
  { P01: 0, P02: '22', P03: 'a1', P04: '[0.58, 0.59)', R01: 1.1 },
  { P01: 0, P02: '22', P03: 'a2', P04: '[0.58, 0.59)', R01: 1.1 },

  { P01: 1, P02: '11', P03: 'a1', P04: '[0.60, 0.66)', R01: 0.85 },
  { P01: 1, P02: '11', P03: 'a2', P04: '[0.60, 0.66)', R01: 0.86 },
  { P01: 1, P02: '22', P03: 'a1', P04: '[0.60, 0.66)', R01: 1.05 },
  { P01: 1, P02: '22', P03: 'a2', P04: '[0.60, 0.66)', R01: 1.05 },
  { P01: 0, P02: '11', P03: 'a1', P04: '[0.60, 0.66)', R01: 1.05 },
  { P01: 0, P02: '11', P03: 'a2', P04: '[0.60, 0.66)', R01: 1.05 },
  { P01: 0, P02: '22', P03: 'a1', P04: '[0.60, 0.66)', R01: 1.1 },
  { P01: 0, P02: '22', P03: 'a2', P04: '[0.60, 0.66)', R01: 1.1 },
]

const resultFactors = [{ code: 'R01', title: '费率' }]

const colFator = [
  {
    code: 'P01',
    title: '⻋损情况',
    options: [
      { value: 1, label: '有⻋损' },
      { value: 0, label: '⽆⻋损' },
    ],
  },
  {
    code: 'P02',
    title: '三责保额',
    options: [
      { value: '11', label: '三责保额 200 万及以上' },
      { value: '22', label: '三责保额 200 万以下' },
    ],
  },
  {
    code: 'P03',
    title: '续保类型',
    options: [
      { value: 'a1', label: '续续 0-1' },
      { value: 'a2', label: '续续 2-3' },
    ],
  },
  // {
  //   key: '0-4',
  //   code: 'phone',
  //   title: '手机',
  //   opt
  // },
]
export default {
  data() {
    return {
      data,
      test: tableDemoClass.createRuleTable(),
      colFator,
      resultFactors,
      rowFactors: [{ code: 'P04', title: '交商含 NCD 标费预赔' }],
      selectedRowKeys: [],
    }
  },
  components: {
    RuleTable,
  },
  mounted() {
    console.log('created', this.$refs.tableDemo)
  },

  computed: {},
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    addFactor() {
      console.log(this.test)
      this.test.addFactor({
        key: '0-5',
        code: 'address2',
        title: '地址2',
        dataType: 'String',
      })
    },
    getRule() {
      console.log('getRule', this.test.getTableData())
    },
    deleteFactor() {
      this.test.deleteFactor('address2')
    },
    updateFactor() {
      this.test.setFactorTitle('name', '地址22')
    },
    getFactor() {
      console.log('getFactor', this.test.getFactor())
    },
    addRule() {
      this.test.addRule({
        name: 'John Brown',
        age: 32,
        tel: '0571-22098909',
        phone: 18889898989,
        address: 'New York No. 1 Lake Park',
      })
    },
    deleteRule() {
      this.test.deleteRule(this.selectedRowKeys[0])
    },
    reset() {
      this.test.reset()
    },
    setHighLight() {
      this.test.setHighLight({ index: 0, name: 'name' })
    },
    setHeaderHighLight() {
      this.test.setHeaderHighLight(['name', 'age'])
    },
    addResults() {
      this.test.addResult({
        key: '0-5-1',
        code: 'result2',
        title: '结果2',
        dataType: 'String',
      })
    },
  },
}
</script>
<style lang="scss" scoped>
</style>
